<template>
  <div>
    <el-drawer title="更多信息" :visible="true" size="790px" direction="rtl" @close="handleClose">
      <div class="mainDrawer" style="">
        <div class="oneLineFlex" style="margin-bottom: 20px;">
          <img :src="infoData.base.userImage" class="avatar" alt="">
          <div class="userName" style="margin-right: 16px;">{{ infoData.base.userName }}</div>
          <img v-if="infoData.base.sex === '1'" src="@/assets/svg/female.svg" class="genderIcon" alt="">
          <img v-else src="@/assets/svg/male.svg" class="genderIcon" alt="">
          <div class="gender"> {{ infoData.base.sex === '0' ? '男' : '女' }}</div>
        </div>
        <div class="oneLineFlex">
          <div class="oneLineFlex">
            <img src="@/assets/svg/userNo.svg" class="genderIcon" alt=""/>
            <div class="infoValue">{{ infoData.base.userNo }}</div>
          </div>
          <div class="oneLineFlex" v-if="infoData.base.phone" style="margin-left: 44px;">
            <img src="@/assets/svg/phone.svg" class="genderIcon" alt=""/>
            <div class="infoValue" style="color: #333333;">{{ infoData.base.phone }}</div>
            <img src="@/assets/svg/copy.svg" class="genderIcon" style="margin-left: 4px;cursor: pointer;"
                 @click="handleCopy" alt="">
          </div>
          <div class="oneLineFlex" v-if="infoData.base.city" style="margin-left: 44px">
            <img src="@/assets/svg/address.svg" class="genderIcon" alt=""/>
            <div class="infoValue">{{ infoData.base.city }}</div>
          </div>
        </div>
        <div style="margin-top:40px;">
          <div style="font-size: 16px;font-weight: 600;color: #333333;margin-bottom: 12px;">摄影设备</div>
          <div v-if="infoData.device.length == 0">无</div>
          <div v-if="infoData.device.length != 0" v-for="item in infoData.device" class="oneLineFlex border" style="flex-wrap: wrap">
            <div class="deviceTitle">{{ item.title }}</div>
            <div class="deviceContent">{{ item.content }}</div>
          </div>
        </div>
        <div style="margin-top:36px">
          <div style="font-size: 16px;font-weight: 600;color: #333333;margin-bottom: 12px;">拍摄经验</div>
          <div v-if="infoData.experience.length == 0">无</div>
          <div v-if="infoData.experience.length != 0" v-for="item in infoData.experience" class="oneLineFlex border" style="flex-wrap: wrap">
            <div class="expTitle">{{ item.title }}</div>
            <div class="expContent">{{ item.content }}</div>
          </div>
        </div>
        <div style="margin-top:36px">
          <div style="font-size: 16px;font-weight: 600;color: #333333;margin-bottom: 12px;">团队角色</div>
          <div v-if="infoData.role.length == 0">无</div>
          <div class="oneLineFlex" style="flex-wrap: wrap;">
            <div  v-if="infoData.role.length != 0" class="roleItem" v-for="item in infoData.role">{{ item }}</div>
          </div>
        </div>
        <div style="margin-top:46px">
          <div style="font-size: 16px;font-weight: 600;color: #333333;margin-bottom: 12px;">作品展示</div>
          <div v-if="infoData.works == 0">无</div>
          <div v-if="infoData.works != 0">
            <a  :href="item" target="_blank" style="margin-bottom: 10px;color:var(--basicColor); "
               v-for="item in infoData.works">查看 </a></div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>

import {getUserMorInfo} from "@/api/human";

export default {
  props: ['id'],
  data() {
    return {
      userNo: this.id,
      infoData: {}
    }
  },
  mounted() {
    this.getUserInfo()
  },
  methods: {
    getUserInfo() {
      getUserMorInfo({userNo: this.userNo}).then(res => {
        if (res) {
          this.infoData = res
        }
      })
    },
    handleClose() {
      this.$emit('close')
    },
    async handleCopy() {
      try {
        await navigator.clipboard.writeText(this.infoData.base.phone)
        this.$message.success('已复制')
      } catch (e) {
        this.$message.error('剪切板复制失败')
        console.error(e)
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.userName {
  font-weight: 600;
  font-size: 14px;
  color: #333333;
  margin-left: 8px;
}

.genderIcon {
  width: 16px;
  height: 16px;
}

.gender {
  font-size: 14px;
  color: #666666;
  margin-left: 8px;
}

.mainDrawer {
  padding: 0 40px;
  overflow-y: auto;
  max-height: 87vh;
}

.oneLineFlex {
  display: flex;
  align-items: center;
}

.border {
  border: 1px solid #DDDDDD;
  border-bottom: 0;
}

.border:last-child {
  border-bottom: 1px solid #DDDDDD;
}

.infoValue {
  margin-left: 8px;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
}

.deviceTitle {
  background: #F5F5F5;
  border-right: 1px solid #DDDDDD;
  padding: 13px 16px;
  width: 210px;
  font-weight: 600;
  font-size: 14px;
  color: #333333;
  height: 100%;
  text-align: left;
}

.deviceContent {
  width: 482px;
  height: 40px;
  background: #FFFFFF;
  border-left: 0;
  padding: 13px 16px;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
}

.expTitle {
  width: 130px;
  //height: 40px;
  background: #F5F5F5;
  border-right: 1px solid #DDDDDD;
  font-weight: 600;
  font-size: 14px;
  color: #333333;
  padding: 13px 18px;
}

.expContent {
  width: 560px;
  height: 40px;
  background: #FFFFFF;
  border-left: 0;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  padding: 8px 16px;
}

.roleItem {
  height: 30px;
  //line-height: 30px;
  background: #F2F2F2;
  border-radius: 4px;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  padding: 8px 16px;
  margin-right: 16px;
}

@media (max-width: 768px) {
  ::v-deep .el-drawer {
    width: 100vw !important;
    .mainDrawer {
      padding: 0 20px;
    }
    .deviceTitle, .deviceContent  {
      width: 100%;
      border-right: 0;
    }
    .border {
        flex-direction: column;
        align-items: start;
    }
    .expTitle, .expContent {
      width: 100%;
      border-right: 0;
    }
  }
}
</style>
